<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="common/head :: header('桀骜的个人博客')"/>
    <th:block th:include="common/include :: viewer-css"/>
    <link th:href="@{/front/css/plugs_paging.css}" rel="stylesheet"/>
</head>
<body>
<div id="app">
    <div th:include="common/head :: nav('桀骜的个人博客')"></div>
    <!--页面主体-->
    <div id="main">
        <nav data-am-widget="menu" class="am-menu am-menu-dropdown2" data-am-menu-collapse></nav>
        <div id="content"></div>
    </div>
    <!--消息盒子+反馈-->
    <div th:include="common/other :: other"></div>
    <!--引入共有底部-->
    <div th:include="common/footer :: footer"></div>
</div>
<th:block th:include="common/include :: viewer-js"/>

<script type="text/javascript" th:src="@{/front/js/redirect.js}"></script>
<script type="text/javascript" th:src="@{/front/js/all.js}"></script>
<script type="text/javascript" th:src="@{/front/js/plugn/plugs_paging.js}"></script>


<script th:inline="javascript">
    //初始化相册目录
    initCatalog();
    searchAlbum();

    $(document).ready(function () {

    });

    //获取相册目录树
    function initCatalog() {
        $.ajax({
            type: 'get',
            url: '/front/album/treeData',
            dataType: 'json',
            async: false,
            data: {
                module: "album"
            },
            success: function (data) {
                if (data) {
                    putCatalog(data);
                }
            }
        });
    }

    function searchAlbum(catalogId, currentPage) {
        var param = {
            pageSize: 16,
            catalogId: catalogId,
            pageNum: currentPage ? currentPage : 1
        }
        //加载时请求
        $.ajax({
            type: 'POST',
            url: '/front/album/albumList',
            dataType: 'json',
            data: param,
            success: function (data) {
                if (data.code != 0) {
                    dangerNotice("服务器异常，获得图片信息失败");
                } else {
                    //放入数据
                    putAlbum(data.rows);
                    //分页
                    $("#pagination").paging({
                        rows: param.pageSize,//每页显示条数
                        pageNum: param.pageNum,//当前所在页码
                        pages: Math.ceil(data.total / param.pageSize),//总页数
                        total: data.total,//总记录数
                        callback: function (currentPage) {
                            searchAlbum(catalogId, currentPage);
                        }
                    });
                }
            },
            error: function () {
                alert("获得图片信息失败！");
            }
        });
    }

    function putCatalog(data) {
        let rootNode = data[0];
        let content = '<ul class="am-menu-nav am-avg-sm-4 am-collapse">';
        for (let i = 1; i < data.length; i++) {
            let item = data[i];
            if (rootNode.id == data[i].pId) {
                content += '<li class="am-parent" id="menu_' + data[i].id + '">' +
                    '<a><span onclick="searchAlbum(' + data[i].id + ')">' + data[i].name + '</span></a>' +
                    '<ul class="am-menu-sub am-collapse  am-avg-sm-2 ">';
                for (j = i; j < data.length; j++) {
                    if (data[i].id == data[j].pId) {
                        content += '<li class="am-parent" id="menu_' + data[j].id + '">' +
                            '<a onclick="searchAlbum(' + data[j].id + ')">' + data[j].name + '</a>' +
                            '</li>';
                    }
                }
                content += '</ul></li>';
            }
        }
        content += '</ul>';
        $(".am-menu-dropdown2").append(content);
    }

    function putAlbum(data) {
        $("#content").empty();
        let content = $('<div id="content_img"></div>');
        let content_img = $('<ul class="am-gallery am-avg-sm-6 am-avg-md-6 am-avg-lg-8 am-gallery-default" ></ul>');
        $.each(data, function (index, obj) {
            content_img.append($('<li>' +
                '                    <div class="am-gallery-item">' +
                '                            <img src="' + obj.sourceUrl + '?x-oss-process=image/resize,m_fill,h_200,w_200" data-original="' + obj.sourceUrl + '" alt="图片未找到"/>' +
                '                            <h3 class="am-gallery-title">' + obj.desca + '</h3>' +
                '                            <div class="am-gallery-desc">' + obj.updateTime + '</div>' +
                '                    </div>' +
                '                </li>'));
        });
        content.append(content_img);
        $("#content").append(content);

        let content_page = $('<div class="my-row" id="page-father">' +
            '<div id="pagination">' +
            '</div>' +
            '</div>');

        $("#content").append(content_page);

        $('#content_img').viewer({
            url: 'data-original',
        });
    }
</script>
</body>
</html>
